<template>
  <view class="weekly-report-card" v-if="showFishWeeklyReport">
    <view class="report-content" @click="handleWeeklyReportClick">
      <text class="report-title"
        >🎉 <text class="bold">每周五的摸鱼周报时间到了！</text></text
      >
      <text class="report-desc" v-if="weeklyReportStatus === 0">
        今天还没有人写摸鱼周报哦，抢在第一名写摸鱼周报，获得
        <text class="highlight">1000 积分</text> 奖励！
      </text>
      <text class="report-desc" v-else-if="weeklyReportStatus === 1">
        今天已经有人写了摸鱼周报哦，快来看看吧~
      </text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import api from "@/api";
import { showError } from "@/utils/common.js";

// 摸鱼周报相关
const showFishWeeklyReport = ref(false);
const weeklyReportStatus = ref(0); // 0: 无周报, 1: 有周报
const currentWeeklyReportUrl = ref("");
const todayDateString = ref("");

// 检查是否为周五并且时间在早上8点之后
const checkIfFriday = () => {
  const now = new Date();
  const day = now.getDay(); // 0是周日，6是周六，5是周五
  const hour = now.getHours();

  // 格式化当前日期为yyyyMMdd
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const date = String(now.getDate()).padStart(2, "0");
  todayDateString.value = `${year}${month}${date}`;

  // 只在周五且8点后显示
  if (day === 5 && hour >= 8) {
    showFishWeeklyReport.value = true;
    checkWeeklyReportStatus();
  } else {
    showFishWeeklyReport.value = false;
  }
};

// 检查今天是否已有摸鱼周报
const checkWeeklyReportStatus = async () => {
  try {
    // 使用API模块获取文章列表，参考ArticleList组件
    const res = await api.article.getRecentArticles(1);

    if (res.code === 0) {
      const articles = res.data.articles || [];

      // 查找标题为"摸鱼周报 yyyyMMdd"的文章
      const reportTitle = `摸鱼周报 ${todayDateString.value}`;
      const todayReport = articles.find(
        (article) => article.articleTitle === reportTitle
      );

      if (todayReport) {
        weeklyReportStatus.value = 1; // 已有周报
        currentWeeklyReportUrl.value = `/pages/article/detail?id=${todayReport.oId}`;
      } else {
        weeklyReportStatus.value = 0; // 无周报
      }
    } else {
      showError(res.msg || "获取摸鱼周报状态失败");
    }
  } catch (error) {
    console.error("获取摸鱼周报状态失败", error);
    weeklyReportStatus.value = 0; // 出错时默认为无周报
  }
};

// 处理摸鱼周报点击事件
const handleWeeklyReportClick = () => {
  if (weeklyReportStatus.value === 0) {
    // 没有周报，跳转到写周报页面
    uni.navigateTo({
      url: `/pages/article/post?type=0&tags=摸鱼周报&title=摸鱼周报 ${todayDateString.value}`,
    });
  } else {
    // 已有周报，跳转到查看周报页面
    uni.navigateTo({
      url: currentWeeklyReportUrl.value,
    });
  }
};

onMounted(() => {
  // 检查是否为周五，显示摸鱼周报提醒
  checkIfFriday();
});
</script>

<style lang="scss">
.weekly-report-card {
  margin: 24rpx;
  background: linear-gradient(to right, #6b8cff, #4a6fea);
  border-radius: 20rpx;
  color: #fff;
  box-shadow: 0 10rpx 20rpx rgba(74, 111, 234, 0.2);
  position: relative;
  overflow: hidden;
  border-left: 6rpx solid rgba(255, 255, 255, 0.6);
  animation: fadeIn 0.5s ease-out;

  .report-content {
    padding: 24rpx;
    display: flex;
    flex-direction: column;

    &:active {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }

  .report-title {
    font-size: 30rpx;
    line-height: 1.6;
    display: block;
    margin-bottom: 8rpx;

    .bold {
      font-weight: bold;
    }
  }

  .report-desc {
    font-size: 26rpx;
    line-height: 1.5;

    .highlight {
      font-weight: bold;
      color: #ffd700;
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
